<template>
	<view :class="ggclass" class="data-box" :style="[styles]" @click="ontap">
		<slot></slot>
	</view>
</template>

<script>
	import {
		colorTo
	} from '@/c-plugin/lib/ways/color.js'
	import propsMixin from '../mixins/props/index.js'
	export default {
		mixins: [propsMixin],
		name: "c-box",
		props: {
			padding: {
				type: String,
				default: "",
			},
			backgroundSize: {
				type: String,
				default: "100% 100%",
			},
			width: {
				type: String,
				default: "",
			},
			height: {
				type: String,
				default: "",
			},
			radius: {
				type: String,
				default: "",
			},
			flex: {
				type: String,
				default: "",
			},
			jc: {
				type: String,
				default: "",
			},
			boxShadow: {
				type: String,
				default: ''
			},

		},
		computed: {
			computedBgColor() {
				if (this.background.includes("data") || this.background.includes("http")) {
					return `url(${this.background})`;
				} else {
					return this.background;
					if (this.isOpenPattern) {
						return this.$color.theme.boxBgColor
					}

				}
			},
			styles() {
				let params = {
					background: this.computedBgColor,
					width: this.$rpxunit(this.width),
					height: this.$rpxunit(this.height),
					borderRadius: this.$rpxunit(this.radius),
					padding: this.padding.split(' ').map(v => this.$rpxunit(v)).join(' '),
					color: this.computedColor,
					backgroundSize: this.backgroundSize,
					justifyContent: this.jc,
					flexDirection: this.flex,
					boxShadow: this.boxShadow
				}
				return params
			},
		},
		methods: {
			ontap() {
				this.patterns.proxy.patternKey = new Date().getTime()
			},
		}
	};
</script>

<style lang="scss" scoped>
	.data-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		border-radius: 30rpx;
		position: relative;
		overflow: hidden;
		background: #fff;
		padding: 30rpx 25rpx;
		box-shadow: 0rpx 0rpx 10rpx 1rpx rgba(200, 200, 200, 0.3);
	}
</style>